<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col :lg="10" :md="12" :sm="24" :xl="10" :xs="24">
        <vab-card shadow="hover" style="height: 98%">
          <div class="personal-center-user-info">
            <!-- <el-avatar :size="100" :src="user.avatarUrl" @click="openDialog" /> -->
            <div
              class="personal-center-user-info-full-name"
              style="margin: 60px 0 0 0"
            >
              <div style="margin: 10px 0 0 0">
                <B>{{ user.realName }}</B>
              </div>
            </div>
            <div
              class="personal-center-user-info-description"
              style="margin: 20px 0 60px 0"
            >
              最后登录：{{ user.lastTime }}
            </div>
            <!-- <div class="personal-center-user-info-follow">
              <el-button
                round
                style="
                  background-color: #58b5e1;
                  color: #fff;
                  border: 0px;
                  font-size: 14px;
                "
                @click="openDialog"
              >
                更换头像
              </el-button>
            </div> -->
            <el-button @click="toClickUpLoad">toClickUpLoad</el-button>
            <ul class="personal-center-user-info-list">
              <li class="user-card">
                <vab-icon icon="smartphone-line" />
                <div>联系电话</div>
                <div class="user-card-right">{{ user.phone }}</div>
              </li>
              <el-divider />
              <li class="user-card">
                <vab-icon icon="mail-line" />
                <div>用户邮箱</div>
                <div class="user-card-right">{{ user.email }}</div>
              </li>
              <el-divider />
              <li class="user-card">
                <vab-icon icon="team-fill" />
                <div>所属角色</div>
                <div class="user-card-right">{{ user.role }}</div>
              </li>
              <el-divider />
              <li class="user-card">
                <vab-icon icon="calendar-2-line" />
                <div>创建日期</div>
                <div class="user-card-right">{{ user.createTime }}</div>
              </li>
              <!-- <el-divider /> -->
              <!-- <li>
                <el-divider />
                <h5>个性签名</h5>
                <span>{{ user.label }}</span>
              </li> -->
            </ul>
          </div>
        </vab-card>
      </el-col>
      <el-col :lg="14" :md="12" :sm="24" :xl="14" :xs="24">
        <vab-card shadow="hover" style="height: 98%">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
              <el-form label-width="120px" :model="form">
                <el-form-item label="账号">
                  <el-input
                    v-model="user.username"
                    :disabled="true"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input
                    v-model="user.realName"
                    placeholder="请输入姓名"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input
                    v-model="user.phone"
                    placeholder="请输入联系电话"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="user.sex" size="large">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input
                    v-model="user.email"
                    placeholder="请输入邮箱"
                    size="large"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    size="large"
                    style="
                      background-color: #58b5e1;
                      color: #fff;
                      border: 0px;
                      font-size: 14px;
                      width: 100%;
                    "
                    @click="update"
                  >
                    提交
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="second">
              <el-form label-width="120px" :model="form">
                <el-form-item label="原始密码">
                  <el-input
                    v-model="user.password"
                    placeholder="请输入原密码"
                    size="large"
                    :type="showPwd ? 'text' : 'password'"
                  />
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input
                    v-model="user.newPassword"
                    placeholder="请输入新密码"
                    size="large"
                    :type="showPwd ? 'text' : 'password'"
                  />
                </el-form-item>
                <el-form-item label="重复新密码">
                  <el-input
                    v-model="user.newPasswordRepeat"
                    placeholder="请再次输入新密码"
                    size="large"
                    :type="showPwd ? 'text' : 'password'"
                  />
                </el-form-item>
                <el-form-item>
                  <div style="display: flex">
                    <el-button
                      size="large"
                      style="width: 160px"
                      type="warning"
                      @click="showPwd = !showPwd"
                    >
                      显示/隐藏密码
                    </el-button>
                    <el-button
                      size="large"
                      style="
                        background-color: #58b5e1;
                        color: #fff;
                        border: 0px;
                        font-size: 14px;
                        flex: 1;
                      "
                      @click="updatePwd"
                    >
                      提交
                    </el-button>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </vab-card>
      </el-col>
    </el-row>
    <el-upload
      accept=".xlsx"
      :action="baseURL + 'public/upload'"
      :before-upload="beforeUpload"
      class="main_img_upload"
      :headers="headers"
      :on-success="handleSuccess"
      :show-file-list="false"
    />
    <avatar-component ref="AvatarComponentRef" @update-avatar="updateAvatar" />
  </div>
</template>

<script>
  import {
    computed,
    defineComponent,
    getCurrentInstance,
    reactive,
    toRefs,
  } from 'vue'
  import { useStore } from 'vuex'
  import AvatarComponent from './avatar.vue'
  import { getUserInfo } from '@/api/user'
  import { doEdit, doEditPwd } from '@/api/system_admin'
  import { baseURL } from '@/config/net.config'
  export default defineComponent({
    name: 'PersonalCenter',
    components: { AvatarComponent },
    setup() {
      const store = useStore()

      const { proxy } = getCurrentInstance()

      const state = reactive({
        AvatarComponentRef: null,
        activeName: 'first',
        user: {},
        form: {
          username: 'zhangsan',
        },
        demo: {},
        showPwd: false,
        headers: null,
        baseURL: null,
      })
      state.baseURL = baseURL
      state.headers = {
        Authorization: computed(() => store.getters['user/token']),
      }

      const handleClick = (tab, event) => {
        console.log(tab, event)
      }

      const openDialog = () => {
        state['AvatarComponentRef'].open(state.user)
      }

      const fetchData = async () => {
        const {
          data: { userInfo },
        } = await getUserInfo()
        state.user = Object.assign({}, userInfo)
      }

      const update = async () => {
        const { msg } = await doEdit(state.user)
        proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
      }

      const updatePwd = async () => {
        if (
          !state.user.newPassword ||
          !state.user.newPasswordRepeat ||
          !state.user.password
        ) {
          proxy.$baseMessage('请将表单填写完整', 'error')
          return
        }
        if (state.user.newPassword != state.user.newPasswordRepeat) {
          proxy.$baseMessage('两次输入的新密码不同', 'error')
          return
        }
        const { msg } = await doEditPwd(state.user)
        proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
      }

      const updateAvatar = async (user) => {
        const { msg } = await doEdit(user)
        proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
        console.log(user)
        state.user = user
      }

      const beforeUpload = (file) => {
        const maxFileSize = 10
        if (file.size > maxFileSize * 1024 * 1024) {
          proxy.$baseAlert(
            '文件最大限制为' +
              maxFileSize +
              'M！您上传的文件大小为：' +
              (file.size / 1024 / 1024).toFixed(2) +
              'M',
            '文件超出限制'
          )
          return false
        }
        return true
      }

      const toClickUpLoad = () => {
        document.querySelector('.main_img_upload input').click()
      }
      const handleSuccess = (res, file) => {
        if (res.stat == 200) {
          console.log(res)
          console.log(file)
        } else {
          proxy.$baseMessage(res.msg, 'error', 'vab-hey-message-error')
        }
      }

      return {
        ...toRefs(state),
        avatar: computed(() => store.getters['user/avatar']),
        fetchData,
        openDialog,
        update,
        updateAvatar,
        handleClick,
        updatePwd,
        beforeUpload,
        handleSuccess,
        toClickUpLoad,
      }
    },
    mounted() {
      this.fetchData()
    },
  })
</script>

<style lang="scss" scoped>
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    #{$base}-user-info {
      padding: $base-padding;
      text-align: center;

      :deep() {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-follow {
        margin-top: 15px;
      }

      &-list {
        margin-top: 18px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        :deep() {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;
        margin-left: $base-margin;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }
  .user-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .user-card-right {
      flex: 1;
      text-align: right;
    }
  }
  .html body .el-divider--horizontal,
  html body[class*='vab-theme-'] .el-divider--horizontal {
    margin-bottom: 0;
  }
  ul {
    padding: 0 40px;
  }
</style>
